<template>
  <!--面包屑导航-->
  <Breadcrumb>
    <template #firstTitle>
      <span>用户管理</span>
    </template>
    <template #secondTitle>
      <span>用户列表</span>
    </template>
  </Breadcrumb>

  <el-card class="box-card">
    <!--搜索与添加-->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          placeholder="请输入内容"
          clearable
          v-model="queryInfo.query"
          @clear="getListData"
        >
          <template #append>
            <el-button :icon="Search" @click="getListData"></el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleAdd">添加用户</el-button>
      </el-col>
    </el-row>
    <!--用户列表-->
    <el-table border stripe :data="userList" v-loading="loading">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="mobile" label="电话"></el-table-column>
      <el-table-column prop="role_name" label="角色"></el-table-column>
      <el-table-column prop="mg_state" label="状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.mg_state"
            @change="userStateChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220px">
        <template #default="scope">
          <!--编辑按钮-->
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <!--删除按钮-->
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          <!--分配角色按钮-->
          <el-button type="warning" size="small" @click="handleSetRole(scope.row)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
    
  </el-card>

  <!-- 添加/编辑用户 -->
  <addOrEditUser
    v-model="addOrEditVisible"
    v-model:userInfo="userInfo"
    @success="addOrEditSuccess"
  />

  <!-- 给用户分配权限 -->
  <setUserRole
    v-model="setRoleVisible"
    v-model:userInfo="userInfo"
    v-model:rolesList="rolesList"
    @success="setRoleSuccess"
  />
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getUser, setUserState, deleteUser } from "@/api/user.js";
import { getRoles } from "@/api/roles.js";
import { ElMessage, ElMessageBox } from "element-plus";
import addOrEditUser from "./addOrEditUser.vue";
import setUserRole from "./setUserRole.vue";

const userList = ref([]); // 列表数据
const loading = ref(false);
// 获取用户列表的参数对象
const queryInfo = reactive({
  query: "",
  pagenum: 1, // 当前的页数
  pagesize: 5, // 当前每页显示多少条数据
});
const total = ref(0); // 总条数
const addOrEditVisible = ref(false); // 控制添加用户对话框的显示和隐藏
const setRoleVisible = ref(false); // 控制分配角色对话框的显示与隐藏
const userInfo = ref({}); // 当前用户信息
const rolesList = ref([]); // 角色列表

onMounted(() => {
  getListData();
  getRoleList();
});

const getRoleList = async () => {
  const data = await getRoles();
  rolesList.value = data.map((item) => {
    return {
      id: item.id,
      roleName: item.roleName,
      roleDesc: item.roleDesc,
    };
  });
};

// 查询列表
const getListData = async () => {
  loading.value = true;
  const data = await getUser(queryInfo).finally(() => {
    loading.value = false;
  });

  // console.log(data);

  userList.value = data.users;
  total.value = data.total;
};

// 改变用户状态
const userStateChange = async (userInfo) => {
  loading.value = true;
  const data = await setUserState(userInfo).finally(() => {
    loading.value = false;
  });

  // console.log(data);
  ElMessage.success("更新用户状态成功！");
};

// 添加用户
const handleAdd = () => {
  userInfo.value = {};
  addOrEditVisible.value = true;
};

// 点击编辑用户
const handleEdit = (row) => {
  userInfo.value = row;
  addOrEditVisible.value = true;
};

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm("此操作将永久删除该用户数据, 是否继续?", "删除用户信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await deleteUser(id);
    ElMessage.success("删除成功");
    getListData();
  });
};

// 分配角色
const handleSetRole = (row) => {
  userInfo.value = row;
  setRoleVisible.value = true;
};

// 监听pageSize改变
const handleSizeChange = (newSize) => {
  queryInfo.pagesize = newSize;
  getListData();
};

// 监听页码值的改变
const handleCurrentChange = (newPage) => {
  queryInfo.pagenum = newPage;
  getListData();
};

// 添加/编辑弹框关闭后回调函数
const addOrEditSuccess = () => {
  addOrEditVisible.value = false;
  userInfo.value = {};
  getListData();
};

// 分配权限弹框关闭后回调函数
const setRoleSuccess = () => {
  setRoleVisible.value = false;
  userInfo.value = {};
  getListData();
};
</script>

<style lang="scss" scoped></style>
